<template>
	<view class="page">
    <div class="page-content">
      <u-swiper :list="list" :height="500"></u-swiper>
      <div class="home-content">
        <div class="home-content-header">
          <u-section title="钓鱼圈" color="rgb(254, 129, 5)" sub-title="一起玩" @click="toMore"></u-section>
        </div>
        <div class="home-list">
          <div class="home-item" v-for="item in dataList">
            <u-avatar :src="$baseUrl + item.member.avatar" size="mini"></u-avatar>
            <div class="item-content">
              <div class="nickname">{{item.member.nickname}}</div>
              <div class="desc">{{ item.content }}</div>
              <u-image style="margin: 20rpx 0" :src="item.image" width="100%" height="200rpx"></u-image>
              <div class="time">{{item.location}}</div>
              <div style="display: flex;justify-content: space-between;align-items: center">
                <div class="time">{{item.create_time}}</div>
                <div style="display: flex;align-items: center;">
                  <u-icon :name="item.isCollect ? 'heart-fill' : 'heart'" size="32rpx" :color="item.isCollect ? 'rgb(254, 129, 5)' : '#333'" @click="toCollect(item)"></u-icon>
                  <u-icon name="chat" size="32rpx" color="#333" style="margin-left: 20rpx" @click="toComment(item)"></u-icon>
                </div>
              </div>

              <div class="collect-list" style="margin-top: 10rpx">
                <u-icon name="heart" size="26rpx" color="#666"></u-icon>
                <span class="collect-name">
                  {{ item.collectname }}
                </span>
              </div>
              <div class="comment-list">
                <div class="comment-item" v-for="commentItem in item.comments">
                  <span class="comment-name">
                  {{ commentItem.member.nickname }}：
                </span>
                  <span class="comment-content">
                  {{ commentItem.content }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <u-modal v-model="show" title="评论" @confirm="confirm" ref="uModal" :async-close="true" show-cancel-button>
      <div style="padding: 0 20rpx">
        <u-input type="textarea" v-model="commentValue"></u-input>
      </div>
    </u-modal>
    <Tabbar :current="0"/>
	</view>
</template>

<script>
  import Tabbar from '@/components/tabbar.vue'
	export default {
    components: {
      Tabbar
    },
		data() {
			return {
        $baseUrl: this.$baseUrl,
        list: [
            {
          image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东'
        },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
            title: '身无彩凤双飞翼，心有灵犀一点通'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
            title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
          }
        ],
        dataList: [
        ],
        comment: null,
        show: false,
        commentValue: '',
			}
		},
    onShow() {
      this.$api.friendList().then(res => {
        this.dataList = res
      })
      this.$api.bannerList().then(res => {
        this.list = res.map(item => {
          return {
            image: this.$baseUrl + item.image,
            title: item.name
          }
        })
      })
    },
		methods: {
      toMore() {
        uni.navigateTo({
          url: '/pages/play/play',
          animationType: 'pop-in',
          animationDuration: 200
        })
      },
      confirm() {
        if (!this.commentValue) {
          uni.showToast({
            title: '请输入内容',
            icon: 'none'
          })
          return
        }
        this.show = false
      },
      toComment(comment) {
        this.comment = comment
        this.commentValue = ''
        this.show = true
      },
      toCollect(item) {
        item.isCollect = !item.isCollect
      }
		}
	}
</script>

<style lang="scss">
.home-content {
  overflow: hidden;
  .home-content-header {
    border-radius: 20rpx 20rpx 0 0;
    padding: 20px 10px;
    border-bottom: 1px solid #f0f0f0;
    background-color: #ffffff;
  }
  .home-item {
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    padding: 40rpx;
    .item-content {
      flex-grow: 1;
      padding: 0 20rpx;

      .nickname {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 10rpx;
        line-height: 28rpx;
      }
      .time {
        font-size: 24rpx;
        color: #999;
      }
      .more-box {
        padding: 0 14rpx;
        border-radius: 2px;
        background-color: #f3f4f6;
      }
      .collect-list,
      .comment-list{
        padding: 20rpx;
        border-radius: 2px;
        background-color: #f3f4f6;
        color: #333;
        font-size: 24rpx;
        line-height: 28rpx;
      }
      .comment-item {
        .comment-name {
          color: #007aff;
        }
        .comment-content {
          color: #333;
        }
      }
    }
  }
}
</style>
